#first {
	display: flex;
	flex-direction: column;
	main {
		flex-grow: 1;
		overflow-y: auto;
	}
	//  首页轮播图
	.first-swiper {
		width: 100%;
		height: 200px;
		background: #ccc;
		margin-bottom: 20px;

		.slider1 {
			background: url(../../assets/images/course-img03.jpg) no-repeat center
				center;
			background-size: cover;
		}

		.slider2 {
			background: url(../../assets/images/course-img04.jpg) no-repeat center
				center;
			background-size: cover;
		}

		.slider3 {
			background: url(../../assets/images/course-img02.png) no-repeat center
				center;
			background-size: cover;
		}
	}
	// 排名与今日打卡
	#main1 {
		display: flex;
		width: 100%;
		justify-content: space-around;
		margin-bottom: 20px;
		#rank {
			width: 150px;
			height: 150px;
			color: #004e73;
			padding: 10px 10px 0 10px;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 20px;
			background: url(../../assets/images/index-card-rank.png) no-repeat left
				center;
			background-size: cover;
			background-color: #54afda;
			border-radius: 15px;
			span {
				display: block;
				text-align: right;
				color: #fff;
				font-weight: bold;
				font-size: 80px;
			}
		}
		#clock {
			position: relative;
			width: 212px;
			height: 150px;
			background: url(../../assets/images/index-card-sum.png) no-repeat left
				center;
			background-size: contain;
			background-color: #9fd9f8;
			border-radius: 15px;
			padding: 10px 0 0 10px;
			color: #004e73;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 20px;
			button {
				display: block;
				position: absolute;
				bottom: 20px;
				right: 20px;
				font-weight: bold;
				color: #004e73;
				border: 2px solid #004e73;
				border-radius: 20px;
				background-color: transparent;
				padding: 5px 10px;
			}
		}
	}
	// 运动数据和徽章
	#main2 {
		display: flex;
		width: 100%;
		justify-content: space-around;
		margin-bottom: 20px;
		#sportData {
			width: 185px;
			height: 130px;
			background: url(../../assets/images/index-card-data.png) no-repeat center
				center/cover;
			color: #fff;
			padding: 10px 0 0 10px;
			box-sizing: border-box;
			border-radius: 15px;
		}
		#badge {
			width: 185px;
			height: 130px;
			background: url(../../assets/images/index-card-badge.png) no-repeat left
				center;
			background-size: contain;
			background-color: #9dbde3;
			padding: 10px 0 0 10px;
			box-sizing: border-box;
			border-radius: 15px;
			padding: 10px 20px 0 10px;
			color: #004e73;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 20px;
			div {
				display: inline-block;
				text-align: right;
				color: #004e73;
				font-size: 80px;
			}
			span {
				font-size: 20px;
			}
		}
	}
	// 课程训练
	#main3 {
		width: 385px;
		height: 130px;

		background: url(../../assets/images/course-img04.jpg) no-repeat center
			center/cover;
		color: #fff;
		padding: 10px 0 0 10px;
		box-sizing: border-box;
		border-radius: 15px;
		// margin-bottom: 20px;
		margin: 20px auto;
	}
	// 户外跑步
	#main4 {
		width: 385px;
		height: 130px;
		margin: 0 auto;
		background: url(../../assets/images/index-card-run.png) no-repeat center
			center/cover;
		color: #fff;
		padding: 10px 0 0 10px;
		box-sizing: border-box;
		border-radius: 15px;
	}
	// 底部导航
	#tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100px;
		width: 100%;
		box-shadow: 0px -3px 5px 0px #ddd;
		font-size: 20px;

		a {
			color: #ccc;
			&.active {
				color: #539dff;
			}
		}
		i {
			display: block;
			text-align: center;
			font-size: 30px;
		}
	}
}
